﻿<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE> ZTREE DEMO - reAsyncChildNodes</TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
  <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
  <!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
  <SCRIPT type="text/javascript">
    <!--
    var setting = {
      view: {
        selectedMulti: false
      },
      async: {
        enable: true,
        url: "../asyncData/getNodes.php",
        autoParam: ["id", "name=n", "level=lv"],
        otherParam: { "otherParam": "zTreeAsyncTest" },
        dataFilter: filter
      },
      callback: {
        beforeClick: beforeClick,
        beforeAsync: beforeAsync,
        onAsyncError: onAsyncError,
        onAsyncSuccess: onAsyncSuccess
      }
    };

    function filter(treeId, parentNode, childNodes) {
      if (!childNodes) return null;
      for (var i = 0, l = childNodes.length; i < l; i++) {
        childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
      }
      return childNodes;
    }

    function beforeClick(treeId, treeNode) {
      if (!treeNode.isParent) {
        alert("Please select one parent node...");
        return false;
      } else {
        return true;
      }
    }

    var log, className = "dark";

    function beforeAsync(treeId, treeNode) {
      className = (className === "dark" ? "" : "dark");
      showLog("[ " + getTime() + " beforeAsync ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
      return true;
    }

    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
      showLog("[ " + getTime() + " onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
    }

    function onAsyncSuccess(event, treeId, treeNode, msg) {
      showLog("[ " + getTime() + " onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
    }

    function showLog(str) {
      if (!log) log = $("#log");
      log.append("<li class='" + className + "'>" + str + "</li>");
      if (log.children("li").length > 8) {
        log.get(0).removeChild(log.children("li")[0]);
      }
    }

    function getTime() {
      var now = new Date(),
        h = now.getHours(),
        m = now.getMinutes(),
        s = now.getSeconds(),
        ms = now.getMilliseconds();
      return (h + ":" + m + ":" + s + " " + ms);
    }

    function refreshNode(e) {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        type = e.data.type,
        silent = e.data.silent,
        nodes = zTree.getSelectedNodes();
      if (nodes.length == 0) {
        alert("Please select one parent node at first...");
      }
      for (var i = 0, l = nodes.length; i < l; i++) {
        zTree.reAsyncChildNodes(nodes[i], type, silent);
        if (!silent) zTree.selectNode(nodes[i]);
      }
    }

    $(document).ready(function() {
      $.fn.zTree.init($("#treeDemo"), setting);
      $("#refreshNode").bind("click", { type: "refresh", silent: false }, refreshNode);
      $("#refreshNodeSilent").bind("click", { type: "refresh", silent: true }, refreshNode);
      $("#addNode").bind("click", { type: "add", silent: false }, refreshNode);
      $("#addNodeSilent").bind("click", { type: "add", silent: true }, refreshNode);
    });
    //-->
  </SCRIPT>

</HEAD>

<BODY>
<h1>Dynamic Tree - zTree methods</h1>
<h6>[ File Path: core/async_fun.html ]</h6>
<div class="content_wrap">
  <div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
  </div>
  <div class="right">
    <ul class="info">
      <li class="title">
        <h2>1, Explanation of reAsyncChildNodes</h2>
        <ul class="list">
          <li class="highlight_red">How to use zTreeObj.reAsyncChildNodes method, please see the API documentation.</li>
          <li>
            <p>
              This Demo can only select one parent node<br/>
              Try: [ <a id="refreshNode" href="#" onclick="return false;">reload</a> ]&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="addNode" href="#" onclick="return false;">append</a> ]
            </p>
          </li>
          <li>
            <p>
              <span class="highlight_red">'isSilent' parameter is only for the collapsed state of the parent node.</span><br/>
              Try: [ <a id="refreshNodeSilent" href="#" onclick="return false;">Quietly reloaded</a> ]&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="addNodeSilent" href="#" onclick="return false;">Quietly append</a> ]<br/>
              async log:<br/>
              <ul id="log" class="log"></ul>
            </p>
          </li>
        </ul>
      </li>
      <li class="title">
        <h2>2, Explanation of setting</h2>
        <ul class="list">
          <li class="highlight_red">For useing reAsyncChildNodes method, you need to set attributes in setting.async, see the API documentation for more related contents.</li>
        </ul>
      </li>
      <li class="title">
        <h2>3, Explanation of treeNode</h2>
        <ul class="list">
          <li>Same as 'Dynamic Tree with Ajax'</li>
        </ul>
      </li>
      <li class="title">
        <h2>4、Other explanation</h2>
        <ul class="list">
          <li>Same as 'Dynamic Tree with Ajax'</li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</BODY>
</HTML>